<script setup lang="ts">
import {
  ref,
  computed,
  watch,
  defineProps,
  nextTick,
  onMounted,
  onUnmounted,
  type Ref
} from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";

import { xemitter } from "@/utils/mitt";

defineProps({
  width: {
    type: String as PropType<string>,
    default: "100%"
  },
  height: {
    type: String as PropType<string>,
    default: "250px"
  }
});

const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});

const pieChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
  theme
});

onMounted(() => {
  nextTick(() => {
    // xemitter.on("emitPieData", data => {
    //   console.log("onPieData", data);
    //   drawChart(data);
    // });

    const data = [
      { value: 1048, name: "云安全" },
      { value: 735, name: "资产告警" },
      { value: 580, name: "Poc告警" },
      { value: 580, name: "端口告警" },
      { value: 580, name: "http告警" }
    ];

    drawChart({
      pieData: data,
      pieType: "homePie"
    });
  });
});

onUnmounted(() => {
  xemitter.off("emitPieData");
});

const pieStyle = ref("width: 100%; height: 100%;");

const drawChart = params => {
  // 写一段代码判断参数是否有itemStyle属性,有的话合并属性值，没有的话就直接赋值空对象

  let itemStyle = {};
  let color = [];
  let radius = [];
  let labelLine = {
    show: true
  };
  let emphasis = {};
  const legend = {
    icon: "circle",
    right: true
  };
  const data = params.pieData;
  if (params.pieType === "homePie") {
    itemStyle = {
      borderRadius: 10, //圆角
      borderColor: "#fff",
      borderWidth: 2
    };
    color = ["#e6a23c", "#f56c6c", "#53a7ff", "#73C0DE", "#91CC75"];
    radius = ["50%", "90%"];
    labelLine = {
      show: false
    };
    emphasis = {
      label: {
        show: true,
        fontSize: 40,
        fontWeight: "bold"
      }
    };
    pieStyle.value = "width: 100%; height: 100%;";
    legend.right = false;
  } else {
    itemStyle = {};
    color = ["#e6a23c", "#f56c6c", "#53a7ff"];
    radius = "70%";
    labelLine = {
      show: false
    };
    pieStyle.value = "width:100%;height:250px;";
  }

  setOptions(
    {
      tooltip: {
        trigger: "item"
      },
      legend: {
        icon: "circle",
        //@ts-expect-error
        right: true
      },
      // backgroundColor: "rgb(16 12 42)",
      series: [
        {
          name: "资产组数值",
          type: "pie",
          top: "20%",
          radius: radius,
          // center: ["40%", "50%"],
          color: color,
          itemStyle,
          data: data,
          emphasis,
          label: {
            show: true,
            position: "center"
          }
        }
      ]
    },
    {
      name: "click",
      callback: params => {
        console.log("click", params);
      }
    },
    // 点击空白处
    {
      type: "zrender",
      name: "click",
      callback: params => {
        console.log("点击空白处", params);
      }
    }
  );
};

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);
</script>

<template>
  <div ref="pieChartRef" :style="{ height, width }" />
</template>
